<template>
    <div class="model">
      <div class="mask" @click="changeIsShowLoginModel(false)">
  
      </div>
      <div class="loginbox">
          <div class="close" @click="changeIsShowLoginModel(false)"></div>
          <section class="nav">
              <a href="javascript:void(0);" :class="{active: isShowPhone }" @click="isShowPhone=true">手机号登录</a> | <a href="javascript:void(0);" :class="{active: !isShowPhone }" @click="showQr">微信扫码登录</a>
          </section>
          <div class="content">
              <div class="phonebox" v-show="isShowPhone">
                  <div class="row">
                      <input type="text" placeholder="请输入手机号" v-model="phoneNumber">
                  </div>
                  <div class="row">
                      <slide-verify :l="42" :r="20" :w="362" :h="140" :imgs="imgArr" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg"></slide-verify>
                  </div>
                  <div class="row">
                      <input type="text" placeholder="请输入验证码" v-model="codeval"> <button class="btncode" @click="getcode" v-show="!isShowCount">获取验证码</button>
                      <button class="btncode" v-show="isShowCount">{{ count }} s后重新获取</button>
                  </div>
                  <div class="row">
                       <button class="btnlogin" @click="submitFn">登录</button>
                  </div>
                 
              </div>
              <!-- 显示微信二维码第二步 -->
              <div id="weixin" class="qrbox" v-show="!isShowPhone">
                  微信登录
              </div>
          </div>
          </div>
    </div>
  </template>
  
  <script>
  
  import { validatePhoneNumber } from '@/utils'
  import { PhoneReginAPI, SendSMSAPI,BinDingAPI } from '@/request/api'
  
  export default {
      data(){
          return{
               isShowPhone:true,
               msg: "向右滑动",
               count:10,
               phoneNumber:"",
               isShowCount:false,
               codeval:"",
               imgArr:[
                  require("@/assets/img/integral-01.9386d4bf.png"),
                  require("@/assets/img/integral-02.150d92a1.png"),
                  require("@/assets/img/integral-03.9870f3f1.png"),
                  require("@/assets/img/integral-04.afadcbdf.png"),
               ]
          }
         
      },
      methods:{
          
          // 拼图成功
          onSuccess(times) {
          let ms = (times / 1000).toFixed(1);
          this.msg = "login success, 耗时 " + ms + "s";
          },
          // 拼图失败
          onFail() {
          this.onRefresh(); // 重新刷新拼图
          },
          // 拼图刷新
          onRefresh() {
          this.msg = "再试一次";
          },
          toVerify(){
              if(!validatePhoneNumber(this.phoneNumber)){
                  
                  this.asyncIsShowToast({
                      isshow:true,
                      msg:"请输入正确的手机号码！",
                      type:"danger",
                  });
                  return;
              }
              if(this.msg=="向右滑动" || this.msg== "再试一次"){
                  
                  this.asyncIsShowToast({
                      isshow:true,
                      msg:"请滑动验证码！",
                      type:"danger",
                  });
                  
                  return;
              }
              return true
          },
          async getcode() {
              
              let flag = this.toVerify();
              if(!flag) return;
              let res = await SendSMSAPI({
                  phone: this.phoneNumber,
              });
              // console.log("res",res);
              if (res.code == 0) {
                  this.isShowCount =true;
                  let timer = setInterval(() => {
                  this.count--;
                  if(this.count == 0) {
                      clearInterval(timer);
                      this.count = 10
                      this.isShowCount = false
                  }
              },1000)
              }
              
          },
          showQr(){
              this.isShowPhone = false;
  
              let _this = this;
            new WxLogin({
              id: "weixin",
              appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
              scope: "snsapi_login",
              // 扫码成功后重定向的接口
              redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
              // state填写编码后的url
              state: encodeURIComponent(
                window.btoa("http://127.0.0.1:8080" + _this.$route.path)
              ),
              // 调用样式文件
              href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLC5pbXBvd2VyQm94IC5pbmZvew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9ICAgIA0KLmltcG93ZXJCb3ggcXJjb2Rlew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9",
            });
          },
          // 登录
          async submitFn(){
              if(! this.toVerify())return
              if(this.codeval==""){
                  this.asyncIsShowToast({
                      isshow:true,
                      msg:"请输入短信验证码",
                      type:"danger",
                  });
                  return;
              }
              // 根据uuid取费是否手机绑定微信
              let uuid = localStorage.getItem("uuid");
              let res = null;
              if (uuid) {
                  res = await BinDingAPI({
                      verifyCode: this.codeval,
                      phone: this.phoneNumber,
                      uuid,
                  });
                  // console.log("登录请求-uuid:",res);
              }else{
                  res = await PhoneReginAPI({
                  verifyCode: this.codeval,
                  phone: this.phoneNumber,
              });
              // console.log("登录请求：",res);
              }
              
              if (!res) return;
              // 1.提示成功
              this.asyncIsShowToast({
                      isshow:true,
                      msg:"登录成功",
                      type:"success",
                  });
                  // 2.本地存储token
              localStorage.setItem("x-auth-token", res["x-auth-token"]);
              // 3.关闭模态框
              this.changeIsShowLoginModel(false);
              // 4.显示购物车
              this.changeIsLoginStatus(true);
              // 删除uuid
              localStorage.removeItem("uuid");
              
              this.asyncchangeUserInfo();
          }
      }
  }
  </script>
  
  <style lang="less" scoped>
  .model{
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      .mask{
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.5);
          }
      .loginbox {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          width: 555px;
          height: 423px;
          background: url("../assets/img/login-box-bg.png");
          .close{
              width: 22px;
              height: 22px;
              position: absolute;
              right: 54px;
              top: 10px;
              background: url("../assets/img/close.png");
          }
          .nav{
              text-align: center;
              padding-top: 50px;
              a{
                  text-decoration: none;
                  color: #000;
                  &.active {
                      color: red;
                  }
              }
          }
          .content {
              width: 355px;
              margin: 10px auto 0;
              .phonebox {
                  margin-top: 20px;
                  .row {
                      display: flex;
                      margin-bottom: 20px;
                      input {
                          flex: 1;
                          height: 50px;
                          text-indent: 1em;
                          outline: none;
                      }
                      button {
                          height: 50px;
                          background-color: #0a328e;
                          color: #fff;
                          border: none;
                      }
                      .btncode{
                          margin-left: 10px;
                          height: 55px;
                      }
                      .btnlogin{
                          width: 100%;
                      }
                  }
              }
              .qrbox{
                  text-align: center;
              }
          }
      }
  }
  /deep/.slide-box {
      width: 100%;
      position: relative;
      box-sizing: border-box;
      canvas {
          position: absolute;
          left: 0;
          top: -120px;
          display: none;
          width: 100%;
          box-sizing: border-box;
      }
      .slide-verify-block{
          width: 85px;
          height: 136px;
      }
      .slide-verify-refresh-icon {
          top: -120px;
          display: none;
      }
      &:hover {
          canvas {
              display: block;
          }
          .slide-verify-refresh-icon {
              display: block;
          }
      }
  }
  </style>